const sizeScale = d3.scaleOrdinal()
  .domain(['apple', 'lemon'])
  .range([30, 20]);
  
const colorScale = d3.scaleOrdinal()
  .domain(['apple', 'lemon'])
  .range(['red', 'green']);

const xPostion = (d, i) => 100 + i * 100;


export const fruitbowl = (selection, props ) => {
  //ES6 变量解构与赋值
  const { fruits, height, setSelectedFruit, selectedFruit } = props;

  //singular elements 单独元素,使用data([null]),
  //  传入只有一个元素的数组即可,通常为null,数组元素类型任意无限制
  selection.selectAll('rect')
    .data([null])
    .enter()
    .append('rect')
    .attr('x', 50)
    .attr('y', 105)
    .attr('width', 500)
    .attr('height', 300)
    .attr('rx', 300 / 2)
    .attr('fill', 'steelblue')
    .attr('opacity', 0.5);
  



  //声明group 即 <g> 元素,预置数据为fruits
  const groups = selection.selectAll('g')
    .data(fruits);
  //提取公共代码部分声明为常量
  const groupsEnter = groups.enter().append('g');
  
  groupsEnter
    .merge(groups)//merge合并update操作
      .attr('transform', (d, i) => 
        //使用translate调整groups对象即<g>元素中的x y 偏移量
        //(因为text 和 circle的属性分别是x,y 和 cx,cy)
        `translate(${100 + i * 100}, ${height / 2})`
      );
  
  groups.exit().remove();
  
  const circles = groups.select('circle');
  groupsEnter
    .append('circle')//在分组中添加圆,x,y已经有transform属性设置
    .merge(circles)
  /* 前四行代码同样可以写作, 效果相同
     A.merge(B) 同样可以写作B.merge(A)
  groups.select('circle')
    .merge(groupsEnter.append('circle'))
  */
      .attr('fill', d => colorScale(d.type))//填充色
      .attr('stroke-width',  5)
      .attr('stroke', d => d.id === selectedFruit ? 'black' : 'none')
      .attr('r', d => sizeScale(d.type))//大小
      //.on('click', d => setSelectedFruit(d.id));//添加点击事件
      .on('mouseover', d => setSelectedFruit(d.id))
      .on('mouseout', () => setSelectedFruit(null));
  
  /*同样的方法添加文本*/
  const text = groups.select('text');
  groupsEnter
    .append('text')
      .attr('text-anchor', 'middle')//设置文本居中
      .attr('font-size', 20)//字体
      .attr('y', 50)//y轴偏移量
    .merge(text)
      .text(d => d.type);
}